<template>
    <div>
        <div class="form-list">
            <div class="form-item">
                <div>请输入当前密码*</div>
                <el-input type="password" v-model="password" placeholder="请输入当前密码"></el-input>
            </div>
            <div class="form-item">
                <div>请输入新密码*</div>
                <el-input type="password" v-model="newPassword" placeholder="请输入新密码"></el-input>
            </div>
            <div class="form-item">
                <div>请再次输入新密码*</div>
                <el-input type="password" v-model="onePassword" placeholder="请再次输入新密码"></el-input>
            </div>
            <div class="form-item">
                <div @click="checkForm" class="item-btn">确认</div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';
        // 表单
        const formParams = reactive({
            password: '',
            newPassword: '',
            onePassword: ''
        });

        // 用户信息
        const userInfo = ref(null);

        // 验证表单
        const checkForm = async function () {
            if (!window.localStorage.getItem('token')) {
                context.parent.$message.error('请先登录');
                setTimeout(() => {
                    context.parent.$router.push('/login');
                }, 2000)
                return;
            }
            
            // 获取用户信息
            let { data: res } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
            if (res.status != 200)
                return context.parent.$message.error('获取用户信息失败，请重新登录');
            userInfo.value = res.user;

            if (formParams.password === '')
                return context.parent.$message.error('密码不能为空');
            if (formParams.newPassword !== formParams.onePassword)
                return context.parent.$message.error('两次密码不一致，请检查');
            
            submitForm();
        }

        // 提交修改密码表单
        const submitForm = async function () {
            const response = {
                email: userInfo.value.email,
                newPassword: formParams.newPassword,
                password: formParams.password
            }
            let { data: res } = await axios.post('/user/password', response);
            if (res.status != 200)
                return context.parent.$message.error(res.msg);
            context.parent.$message.success(res.msg);
            setTimeout(() => {
                location.reload();
            }, 2000);
        }

        const methods = {
            checkForm
        }
        return {
            ...methods,
            ...toRefs(formParams),
            
        }
    }
}
</script>


<style lang="less" scoped>
.form-list {
    .form-item {
        margin-top: .666667rem;
        padding: 0 .533333rem;
        div {
            font-size: .8rem;
            font-weight: 700;
            color: #4b4b4b;
            margin-bottom: .4rem;
        }
    }
}

.item-btn {
    width: 100%;
    height: 2.133333rem;
    line-height: 2.133333rem;
    text-align: center;
    font-size: .8rem;
    color: #fff!important;
    font-weight: 700;
    background-color: #1a8eed;
    border-radius: .266667rem;
}
</style>